<template>
     <div class="swiper-container">
    <div class="swiper-wrapper">
      <div @click="$emit('getIndex',index)" v-for="(item,index) in data" :key="item.showDate" class="swiper-slide">{{new Date(item.showDate*1000).getMonth()+1}}月{{new Date(item.showDate*1000).getDate()}}日</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>

<script>
import Swiper from 'swiper'
export default {
    data(){
        return{

        }
    },
    methods:{
      gettimeNav(){
      var swiper = new Swiper('.swiper-container', {
      slidesPerView:3,
      spaceBetween: 30,
      freeMode: true
    
    })
        }
    },
    mounted(){
        this. gettimeNav()
    },
    created(){
        this.$emit('getIndex',0)
    },
    props:['data']
    
}
</script>